<template>
  <div>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="username"
      label="姓名"
      width="150">
    </el-table-column>
    <el-table-column
      prop="password"
      label="密码"
      width="150">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄"
      width="150">
    </el-table-column>
    <el-table-column
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
        <el-button type="text" size="small">查看</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    background
    layout="prev, pager, next"
    :total="1000">
  </el-pagination>
    <el-button type="success" @click="exportData" icon="el-icon-download" style="position: relative;left: 550px;top: -75px;">
      导出数据
    </el-button>
 </div>
</template>

<script>
export default {
  methods: {
    handleClick (row) {
      console.log(row)
      this.$router.push({path: '/addUser'})
    },
    exportData () {
      alert('哈喽，你好')
      window.open('/user/info/export', '_parent')
    }
  },

  data () {
    return {
      tableData: [{
        username: '王小虎',
        password: '上海',
        age: '普陀区'
      }]
    }
  },
  created () {
    this.$http.get('http://localhost:8019//user/info/userList').then(resp => {
      console.log(resp)
      this.tableData = resp.data
    })
  }
}
</script>
